<div class="search-filters">
  <ix-input
    [prefixIcon]="iconMarker('search')"
    [maxLength]="100"
    [formControl]="searchControl"
    [placeholder]="'Search' | translate"
  ></ix-input>
  <div class="actions">
    <a
      mat-button
      ixTest="show-all"
      [routerLink]="['/apps/available', AppExtraCategory.All]"
    >
      {{ 'Show All' | translate }}
    </a>
    <button
      mat-button
      ixTest="filter"
      (click)="changeFiltersVisible()"
    >
      {{ 'Filters' | translate }}
      @if (showFilters) {
        <ix-icon name="expand_less"></ix-icon>
      } @else {
        <ix-icon name="expand_more"></ix-icon>
      }
    </button>
  </div>
  @if (showFilters) {
    <div class="filters-container">
      <div class="filters">
        <ix-filter-select-list
          class="sort"
          [formControl]="form.controls.sort"
          [label]="'Sort' | translate"
          [options]="(sortOptions$ | async) || []"
        ></ix-filter-select-list>
        <div class="categories">
          <ix-chips
            [formControl]="form.controls.categories"
            [label]="'Categories' | translate"
            [autocompleteProvider]="categoriesProvider$"
            [allowNewEntries]="false"
          ></ix-chips>
        </div>
      </div>
    </div>
  }
</div>

<div class="header-numbers">
  <div class="header-number">
    <div class="header-number-title">{{ 'Available Apps' | translate }}</div>
    <a class="header-link" ixTest="refresh-apps">
      @if (areLoaded$ | async) {
        <a
          ixTest="available-apps"
          [routerLink]="['/apps/available', AppExtraCategory.All]"
        >
          <h2>{{ (availableApps$ | async)?.length }}</h2>
        </a>
      } @else {
        <ngx-skeleton-loader></ngx-skeleton-loader>
      }
      <a
        *ixRequiresRoles="requiredRoles"
        ixTest="refresh-apps"
        class="refresh-apps"
        (click)="refreshCatalog()"
      >
        {{ 'Refresh Catalog' | translate }}
      </a>
    </a>
  </div>

  <div class="header-number">
    <div class="header-number-title">{{ 'Installed Apps' | translate }}</div>
    <a class="header-link" ixTest="manage-installed-apps" [routerLink]="['/apps/installed']">
      @if (areLoaded$ | async) {
        <h2>{{ (installedApps$ | async)?.length }}</h2>
      } @else {
        <ngx-skeleton-loader></ngx-skeleton-loader>
      }
      <span>{{ 'Manage Installed Apps' | translate }}</span>
    </a>
  </div>
</div>

